<template>
    <!-- 侧边栏 -->
    <el-aside width="auto" class="flex flex-col">
        <h1 @click="RouteToApp" class="sticky top-0 z-50 pt-3 pb-2 pl-3 text-2xl font-semibold text-center bg-white">
            CStar</h1>
        <div class="flex-1">
            <el-menu :default-active="currentActive" class="h-full px-2 el-menu-vertical-demo" :collapse="isCollapse"
                router>
                <template v-for="(item, key) in pageList" :key="key">
                    <el-sub-menu :index="item.path" v-if="item.name && item.children">
                        <template #title>
                            <AppIcon :type="item.meta.iconType" />
                            <span>{{ item.name }}</span>
                        </template>
                        <template v-for="(child, child_key) in item.children" :key="child_key">
                            <el-menu-item @click="changeDefaultActive"
                                :index="child.path ? item.path + '/' + child.path : item.path">{{ child.name
                                }}</el-menu-item>
                        </template>
                    </el-sub-menu>

                    <el-menu-item :index="item.path" v-if="item.name && !item.children">
                        <span>{{ item.name }}</span>
                    </el-menu-item>
                </template>

            </el-menu>
        </div>
    </el-aside>
</template>

<script setup>
import { ref } from 'vue';
import AppIcon from '../AppIcon.vue';
const props = defineProps({
    isCollapse: {
        type: Boolean,
        default: false,
    },
    defaultActive: {
        type: String,
        default: ""
    },
    pageList: {
        type: Array,
        default: []
    }
})

const currentActive=ref(props.defaultActive)

const RouteToApp = () => {
    router.push('/')
    currentActive.value = "/users"
}

const changeDefaultActive = (e) => {
    currentActive.value = e.index
}
</script>

<style></style>